@import "../../style/base/base"; // 引入变量
ul, li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.tab-box {
  width: 100%;
  height: 80px;
  padding: 20px 0;
  background: #F5F7FA;
  border: solid 1px #DEE4EA;
  display: inline-table;
  ul {
    padding-left: 27px;
    li {
      @include tc;
      @include inline;
      .icon-box {
        width: 60px;
        height: 60px;
        border: solid 1px #A8B2BE;
        @include border-radius(100%);
        margin: 0 auto;
        .i-icon {
          width: 44px;
          height: 42px;
          background: url('icon.png');
          @include block;
        }
      }
      p {
        font-size: $sz12;
        color: $cr-3;
      }
      @include mgR(90px);
      &:nth-last-of-type(1) {
        @include mgR(0);
      }
      &:nth-of-type(1) { /* icon 图标*/
        .i-icon {
          background: url('icon.png');
          background-position: 0 0;
        }
        .iconed {
          background: url('icon.png');
          background-position: 0 -42px;
        }
      }
      &:nth-of-type(2) {
        .i-icon {
          background: url('icon.png');
          background-position: -44px 0;
        }
        .iconed {
          background: url('icon.png');
          background-position: -44px -42px;
        }
      }
      &:nth-of-type(3) {
        .i-icon {
          background: url('icon.png');
          background-position: -88px 0;
        }
        .iconed {
          background: url('icon.png');
          background-position: -88px -42px;
        }
      }
      &:nth-of-type(4) {
        .i-icon {
          background: url('icon.png');
          background-position: -132px 0;
        }
        .iconed {
          background: url('icon.png');
          background-position: -132px -42px;
        }
      }
      &:nth-of-type(5) {
        .i-icon {
          background: url('icon.png');
          background-position: -176px 0;
        }
        .iconed {
          background: url('icon.png');
          background-position: -176px -42px;
        }
      }
      &:nth-of-type(6) {
        .i-icon {
          background: url('icon.png');
          background-position: -218px 0;
        }
        .iconed {
          background: url('icon.png');
          background-position: -218px -42px;
        }
      }
    }
    li.actived {
      .icon-box {
        background: $brand-primary;
        border: solid 1px $brand-primary;
      }
      p {
        color: $brand-primary;
      }
    }
  }

}

/* tableLine */
//$light-blue:#32B4E9;
//.tableLine{
//  ul{
//      li{
//
//      }
//      li.hover{
//          color:$light-blue;
//      }
//  }
//}
